<template>
  <div>
    <!--轮播-->
    <el-carousel
      indicator-position="outside"
      style="width:1200px;margin:10px auto;border-radius: 15px"
    >
      <el-carousel-item v-for="item in bannerList" :key="item">
        <img :src="item" alt width="100%" />
      </el-carousel-item>
    </el-carousel>
    <div class="midd">
      <div class="noticeList">
        <el-card class="box-card" style=" width: 48% !important;">
          <div slot="header" class="clearfix">
            <span>赛事公告</span>
            <el-button style="float: right; padding: 3px 0" type="text" @click="link(1)">更多</el-button>
          </div>
          <el-table :data="cannouncementlist" style="width: 100%">
            <el-table-column prop="competition_id" label="公告id"></el-table-column>
            <el-table-column min-width="200px" label="公告标题">
              <template slot-scope="{row}">
                <span
                  @click="lookCam(row.competition_id)"
                  style="cursor:pointer"
                >{{ row.competition_title }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="create_time" label="时间"></el-table-column>
          </el-table>
        </el-card>
        <el-card class="box-card" style=" width: 48% !important;">
          <div slot="header" class="clearfix">
            <span>赛事新闻</span>
            <el-button style="float: right; padding: 3px 0" type="text" @click="link(2)">更多</el-button>
          </div>
          <el-table :data="newsList" style="width: 100%">
            <el-table-column prop="news_event_id" label="指南id"></el-table-column>
            <el-table-column min-width="200px" label="指南标题">
              <template slot-scope="{row}">
                <span
                  @click="lookNews(row.news_event_id)"
                  style="cursor:pointer"
                >{{ row.news_event_title }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="create_time" label="时间"></el-table-column>
          </el-table>
        </el-card>
      </div>
      <el-card class="box-card" shadow="hover">
        <div slot="header" class="clearfix">
          <b>获奖作品</b>
          <el-button style="float: right; padding: 3px 0" type="text" @click="link(3)">更多</el-button>
        </div>
        <div class="tag-group">
          <span class="tag-group__title">类别：</span>
          <el-tag style="cursor:pointer" effect="plain" @click="all">全部</el-tag>
          <el-tag
            v-for="item in categories"
            :key="item.category_id"
            style="cursor:pointer"
            effect="plain"
            @click="tagCat(item.category_id)"
          >{{ item.category_name }}</el-tag>
        </div>
        <div class="text item">
          <el-row>
            <el-col :span="8" v-for="item of wksList" :key="item.index" @click="lookWk(item.wk_id)">
              <el-card :body-style="{ padding: '0px' }">
                <img :src="item.wk_pic" class="image" />
                <div style="padding: 14px;">
                  <b style="width:155px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis" :title="item.wk_name">{{item.wk_name}}</b>
                  <span style="float:right;font-size:12px">{{item.wk_create_time}}</span>
                  <div class="bottom clearfix">
                    <el-button type="text" class="button" @click="openVideo(item.wk_id)">详情</el-button>
                  </div>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>
        <div class="text item" v-show="wksList.length == 0">暂无此类别微课(*^▽^*)~</div>
      </el-card>
    </div>
    <div class="cardDetail">
      <el-dialog
        title="作品详情"
        :visible.sync="dialogVisible"
        width="1200px"
        top="4vh"
        :before-close="videoClose"
      >
        <el-card class="box-card">
          <video :src="wkDetail.wk_video_adress" controls id="a1_html5_api" preload="auto"></video>
          <div class="cardddd">
            <b>{{wkDetail.wk_name}}</b>
            <p style="display:flex;justify-content: space-between;">
              <span>作者：{{wkDetail.user_account}}</span>
              <span>时间：{{wkDetail.wk_create_time}}</span>
            </p>
            <p>作品描述：</p>
            <p style="text-indent:30px;">{{wkDetail.wk_introduce}}</p>
          </div>
        </el-card>
        <el-divider content-position="left">
          <i class="el-icon-s-comment"></i>
        </el-divider>
        <div
          class="block demo-drawer__content"
          v-show="dataEV == 1"
          style=" overflow: scroll !important;height:275px"
        >
          <el-timeline>
            <el-timeline-item placement="top" v-for="item of evData" :key="item.inde">
              <el-card>
                <p>
                  <img :src="item.user_pic" alt style="width:20px;hight:20px;border-r" />
                  <span style="padding-left:10px;font-size: 12px;">{{item.user_account}}</span>
                </p>
                <p style="padding-top:5px;font-size:14px">{{item.evaluate_message}}</p>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </div>
        <p v-show="dataEV == 0" style="text-align: left;padding-left: 22px;height:100px">暂无评论(#^.^#)</p>
        <div class="comment"  v-if="faBiao">
          <el-divider content-position="left">
            <i class="el-icon-s-comment"></i>发表一条评论
          </el-divider>
          <div style="width:90%;margin:0 auto;overflow: auto">
            <el-input
              type="textarea"
              placeholder="请输入内容"
              v-model="evaluateMessage"
              maxlength="130"
              show-word-limit
              style="float:left;width:90%;line-height: normal;"
            ></el-input>
            <el-button
              style="float:right"
              class="el-icon-s-promotion"
              type="primary"
              plain
              @click="putMessage(wkDetail.wk_id)"
            >发表</el-button>
          </div>
        </div>
      </el-dialog>
    </div>
    <el-dialog
      :visible.sync="centerDialogVisible"
      :before-close="closeDet"
      width="40%"
      center
      :closeOnClickModal="false"
      title="新闻详情"
    >
      <el-form :model="tabData" label-width="100px" class="demo-ruleForm" style="width:95%">
        <el-form-item label="新闻ID" prop="news_event_id ">
          <el-input v-model="tabData.news_event_id" readonly></el-input>
        </el-form-item>
        <el-form-item label="新闻标题" prop="news_event_title">
          <el-input v-model="tabData.news_event_title" readonly></el-input>
        </el-form-item>
        <el-form-item label="新闻内容" prop="news_event_content ">
          <el-input type="textarea" v-model="tabData.news_event_content" readonly></el-input>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-dialog
      :visible.sync="noticeShow"
      :before-close="closeDet"
      width="40%"
      center
      :closeOnClickModal="false"
      title="公告详情"
    >
      <el-form :model="canData" label-width="100px" class="demo-ruleForm" style="width:95%">
        <el-form-item label="公告ID" prop="competition_id ">
          <el-input v-model="canData.competition_id" readonly></el-input>
        </el-form-item>
        <el-form-item label="公告标题" prop="competition_title">
          <el-input v-model="canData.competition_title" readonly></el-input>
        </el-form-item>
        <el-form-item label="公告内容" prop="competition_content ">
          <el-input type="textarea" v-model="canData.competition_content" readonly></el-input>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      bannerList: [
        require("@/assets/index/banner4.png"),
        require("@/assets/index/banner2.png"),
        require("@/assets/index/banner3.png"),
        require("@/assets/index/banner1.png")
      ],
      dialogVisible: false,
      wksList: [], //微课列表
      newsList: [], //赛事新闻
      cannouncementlist: [], //赛事公告列表
      categories: [], //微课类别
      detailCollage: {},
      wkcatList: [],
      videoShow: 0,
      wkDetail: {},
      evData: {},
      dataEV: "",
      evaluateMessage: "",
      user: {},
      centerDialogVisible: false,
      noticeShow: false,
      tabData: {
        news_event_id: "",
        news_event_title: "",
        news_event_content: ""
      },
      canData: {
        competition_id: "",
        competition_title: "",
        competition_content: ""
      },
      faBiao:true
    };
  },
  mounted() {
    //首页
    this.getIndex();
    let a = sessionStorage.getItem("user");
    if (a != "undefined") {
      this.user = JSON.parse(a);
    }else{
      this.faBiao = false
    }
  },
  methods: {
    //首页
    getIndex() {
      var that = this;
      that.$axios
        .get("apis/user/index")
        .then(function(res) {
          if (res.status == 200) {
            if (res.data.status == 1) {
              var dataList = res.data.data;
              that.categories = dataList.wk_categories; //微课类别
              var shgg = dataList.wk_competition_announcements;
              if (shgg.length < 5) {
                //赛事公告
                for (var i = 0; i < shgg.length; i++) {
                  shgg[i].create_time = that
                    .$moment(shgg[i].create_time)
                    .format("YYYY-MM-DD");
                }
                that.cannouncementlist = shgg;
              } else {
                var cannounlist = [];
                for (var i = 0; i < 5; i++) {
                  shgg[i].create_time = that
                    .$moment(shgg[i].create_time)
                    .format("YYYY-MM-DD");
                  cannounlist[i] = shgg[i];
                }
                that.cannouncementlist = cannounlist;
              }
              var ssxw = dataList.wk_news_events;
              if (ssxw.length < 5) {
                for (var i = 0; i < ssxw.length; i++) {
                  ssxw[i].create_time = that
                    .$moment(ssxw[i].create_time)
                    .format("YYYY-MM-DD");
                }
                //赛事新闻
                that.newsList = ssxw;
              } else {
                var newlist = [];
                for (var i = 0; i < 5; i++) {
                  ssxw[i].create_time = that
                    .$moment(ssxw[i].create_time)
                    .format("YYYY-MM-DD");
                  newlist[i] = ssxw[i];
                }
                that.newsList = newlist;
              }
              if (dataList.wks.length < 4) {
                //微课
                for (var i = 0; i < 4; i++) {
                  dataList.wks[i].wk_create_time = that
                    .$moment(dataList.wks[i].wk_create_time)
                    .format("YYYY-MM-DD");
                  if (dataList.wks[i].wk_success == 1) {
                    //判断微课是否获奖
                    that.wksList[i] = dataList.wks[i]; //首页只展示4条
                    that.wkcatList = dataList.wks[i];
                  }
                  that.wkcatList = dataList.wks;
                }
              } else {
                for (var i = 0; i < 5; i++) {
                  dataList.wks[i].wk_create_time = that
                    .$moment(dataList.wks[i].wk_create_time)
                    .format("YYYY-MM-DD");
                  if (dataList.wks[i].wk_success == 1) {
                    //判断微课是否获奖
                    that.wksList[i] = dataList.wks[i]; //首页只展示4条
                  }
                  that.wkcatList = dataList.wks;
                }
              }
            }
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    //xinwen路由跳转
    link(num) {
      var that = this;
      if (num == 1) {
        that.$router.push({ path: "./notice" });
      } else if (num == 2) {
        that.$router.push({ path: "./news" });
      } else if (num == 3) {
        that.$router.push({ path: "./production" });
      }
    },
    //类别列表点击
    tagCat(id) {
      //console.log(id);
      var that = this;
      var catList = that.wkcatList;
      //console.log(catList);

      var lbList = [];
      for (var i = 0; i < catList.length; i++) {
        if (id == catList[i].category_id) {
          lbList.push(catList[i]);
        }
      }
      that.wksList = lbList;
      //console.log(lbList);
    },
    all() {
      this.getIndex();
    },
    //打开详情
    openVideo(id) {
      var that = this;
      that.$axios
        .post(
          "apis/user/wkdetail",
          this.$qs.stringify({
            wkId: id
          })
        )
        .then(function(res) {
          if (res.status == 200) {
            //console.log(res.data);

            if (res.data.status == 1) {
              var dataList = res.data.data.wk;
              that.dialogVisible = true;
              dataList.wk_create_time = that
                .$moment(dataList.wk_create_time)
                .format("YYYY-MM-DD");

              that.wkDetail = dataList;
              if (res.data.data.wk_evaluates.length != 0) {
                that.dataEV = 1;
                that.evData = res.data.data.wk_evaluates;
              } else if (res.data.data.wk_evaluates.length == 0) {
                that.dataEV = 0;
              }
              that.$message({
                message: "详情查询成功~~~~",
                type: "success"
              });
            }
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    //发表
    putMessage(id) {
      //console.log(id);
      let a = sessionStorage.getItem("user");
      
      var that = this;
      if (that.user != null && a != "undefined") {
        that.$axios
          .post(
            "apis/user/addevaluate",
            this.$qs.stringify({
              wkId: id,
              evaluateMessage: that.evaluateMessage,
              userId: that.user.user_id
            })
          )
          .then(function(res) {
            if (res.status == 200) {
              //console.log(res.data);

              if (res.data.status == 1) {
                that.openVideo(id);
                that.evaluateMessage = "";
                that.$message({
                  message: "评论发表成功~~~",
                  type: "success"
                });
              }
            }
          })
          .catch(function(error) {
            console.log(error);
          });
      } else {
        this.evaluateMessage = "";
        this.$notify({
          title: "警告",
          message: "请登录后或者账号审核后再来评论哟！！！",
          type: "warning"
        });
      }
    },
    videoClose() {
      this.dialogVisible = false;
      var video = document.getElementById("a1_html5_api");
      video.pause(); //暂停控制
    },
    //查看赛事公告详情
    lookCam(id) {
      var that = this;
      that.$axios
        .post(
          "apis/admin/cannouncementlistdetail",
          this.$qs.stringify({
            competition_id: id
          })
        )
        .then(function(res) {
          if (res.status == 200) {
            if (res.data.status == 1) {
              that.noticeShow = true;
              that.canData = res.data.data;
              that.$message({
                message: "查询成功~",
                type: "success"
              });
            }
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    //查看详情
    //查看新闻赛事详情
    lookNews(id) {
      //console.log(id);
      var that = this;
      that.$axios
        .post(
          "apis/admin/newseventlistdetail",
          this.$qs.stringify({
            newsEventId: id
          })
        )
        .then(function(res) {
          if (res.status == 200) {
            if (res.data.status == 1) {
              that.centerDialogVisible = true;
              that.tabData = res.data.data;
              that.$message({
                message: "查询成功~",
                type: "success"
              });
            }
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    closeDet() {
      this.centerDialogVisible = false;
      this.noticeShow = false;
    }
  }
};
</script>

<style lang="less">
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}
// .el-form-item__content {
//   margin-left: 0 !important;
//   display: flex;
//   // justify-content: center;
// }
.el-carousel__container {
  position: relative;
  height: 500px;
}
.el-carousel__container {
  height: 314px;
  border-radius: 15px;
}
.el-dialog__body {
  padding: 10px 20px;
}
.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

// .el-tabs__nav-scroll {
//   display: flex;
//   // justify-content: center;
// }
.midd {
  width: 1200px;
  margin: 0 auto;
  .el-card {
    margin-bottom: 10px;
  }
  .noticeList {
    display: flex;
    justify-content: space-between;
  }
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }
  .time {
    font-size: 13px;
    color: #999;
  }

  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    right: 0;
  }

  .image {
    width: 100%;
    display: block;
    height: 184px;
  }
  .el-col-8 {
    width: 22.7%;
  }

  .el-col {
    margin: 12px;
  }

  .el-col-offset-2 {
    margin-left: 12px;
  }
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both;
  }
  .el-form-item__label {
    text-align: left !important;
  }
  .el-tag--plain {
    margin-right: 20px !important;
  }
}
.cardDetail {
  .el-card {
    width: 100%;
    .el-card__body {
      // width: 600px !important;
    }
    video {
      width: 55%;
      float: left;
      padding-bottom: 20px;
    }
    .cardddd {
      width: 40%;
      float: right;
    }
  }
  .block {
    width: 95%;
    margin: 0 auto;
    .el-card {
      width: 80% !important;
      .el-card__body {
        text-align: left !important;
        padding: 10px;
      }
      .el-icon-delete:hover {
        color: red;
      }
      p {
        margin: 0 !important;
      }
    }
    .el-timeline-item {
      padding-bottom: 0;
    }
  }
  .comment {
    background: #fff;
    margin-top: -41px;
  }
}
</style>
